<template>
  <div>
    <div class="userdetailsbox" ref="userview">
      <div class="mtop">
        <div class="imgb">
          <img src="../../assets/images/my.jpg" alt="" ref="backimg" />
        </div>
        <div class="tit">
          <div>收藏歌单({{ collectList.length }}个)</div>
        </div>
        <div class="btn" @click="$router.go(-1)">
          <span class="iconfont icon-fanhui-xianxing"></span>
          返回
        </div>
      </div>
      <div class="backg">
        <div class="content">
          <div class="sundry">
            <div class="ul">
              <li
                v-for="(item, index) in collectList"
                :key="index"
                @click="goMusicllist(item.id,item.count)"
              >
                <img :src="item.picUrl" alt="" />
                <div>
                  <ul>
                    <li>{{ item.name }}</li>
                    <li>{{ item.num }}首</li>
                  </ul>
                </div>
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goMusicllist(id, count) {
      this.$router.push({
        path: "/recommend/musiclist",
        query: { id, count },
      });
    },
  },
  filters: {
    authorFn(old, newd) {
      let str = "";
      newd.forEach((item) => {
        str = str + item.name + " / ";
      });
      str = str.substr(0, str.length - 2);
      return str;
    },
  },
  computed: {
    love() {
      return this.$store.state.love;
    },
    collectList() {
      return this.$store.state.collectList;
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.userdetailsbox {
  .mtop {
    height: 40vh;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
    .imgb {
      height: 100%;
      img {
        //   width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin-bottom: 20px;
        max-width: 100%;
        margin: auto;
      }
    }
    .tit {
      position: absolute;
      left: 18px;
      bottom: 25px;
      font-size: 5vw;
      font-weight: bolder;
      color: #fff;
      span {
        font-size: 3vw;
      }
    }
    .btn {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 4vw;
      color: #fff;
      font-weight: bolder;
    }
  }
  .backg {
    height: 60vh;
    background-color: skyblue;
    background-image: url("../../assets/images/back02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: scroll;
    .content {
      height: 100%;
      position: relative;
      background-color: rgba(0, 0, 0, 0.384);
      color: white;
      padding: 10px;
      box-sizing: border-box;
      .sundry {
        width: 85%;
        margin: 0 auto;
        background-color: rgba(204, 204, 204, 0.5);
        border-radius: 10px;
        .ul {
          list-style: none;
          margin: 0;
          padding: 10px;
          & > li {
            display: flex;
            height: 1.25rem;
            padding: 0.125rem 0;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
            img {
              width: 1.25rem;
              height: 1.25rem;
              border-radius: 8px;
            }
            div {
              height: 100%;
              overflow: hidden;
              ul {
                height: 100%;
                padding-left: 0.3125rem;
                display: flex;
                flex-flow: column;
                justify-content: center;
                li {
                  font-size: 4vw;
                  color: white;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  &:nth-child(2) {
                    font-size: 3vw;
                    color: rgba(255, 255, 255, 0.507);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>